<!DOCTYPE html>
<html lang="en"xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>写下你的博客</title>
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../res/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<style>
  .userLabel{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 30px
  }
</style>
<body>
  <div class="header" style="margin-bottom: 40px">
    <div class="menu-btn">
      <div class="menu"></div>
    </div>
    <h1 class="logo">
      <a href="index.html">
        <span>MYBLOG</span>
        <img src="../res/img/logo.png" style="width: 120px;height: 80px">
      </a>
    </h1>
    <div class="nav">
      <a href="/toIndex.action" >文章</a>
      <a href="/toMyBlog.action">我的博客</a>
      <a href="/toWrite.action"class="active">写博客</a>
      <a href="/toAlbum.action">相册</a>
      <a href="/toAbout.action">个人空间</a>
      <input form="searchForm" type="text" name="searchKey" placeholder="  搜索博客"  style="border-radius: 4px
      ;padding: 3px 0px;font-family: Microsoft YaHei UI;border-style: solid;border-color: forestgreen;">
      <button class="layui-btn" onclick="search()"><i class="layui-icon">&#xe615;</i>搜索</button>
      <label th:if="${session.loginUser != null}">
        <img class="userLabel" th:if="${session.loginUser.sex == 'female'}"src="../res/img/label/girl.png" >
        <img class="userLabel" th:if="${session.loginUser.sex == 'male'}"src="../res/img/label/boy.png" >
        <a href="/toAbout.action" style="color: forestgreen;margin-left: 5px;" th:text="'欢迎您,'+${session.loginUser.name}"></a>
      </label>
    </div>
    <form id="searchForm" action="/searchEssayByTitle.action"></form>
    <ul class="layui-nav header-down-nav">
      <li class="layui-nav-item"><a href="/toIndex.action" >所有文章</a></li>
      <li class="layui-nav-item"><a href="/toMyBlog.action">我的博客</a></li>
      <li class="layui-nav-item"><a href="/toWrite.action">写博客</a></li>
      <li class="layui-nav-item"><a href="/toAlbum.action">相册</a></li>
      <li class="layui-nav-item"><a href="/toAbout.action">个人空间</a></li>
      <li class="layui-nav-item" th:if="${session.loginUser == null}"><a href="toLogin">登录</a></li>
      <li class="layui-nav-item" th:if="${session.loginUser != null}"><a href="toLogout">注销</a></li>
    </ul>
    <div th:if="${session.loginUser == null}">
      <p  class="welcome-text">
        <a href="toLogin" class="layui-btn">登录</a>
      </p>
    </div>
    <div th:if="${session.loginUser != null}">
      <p  class="welcome-text">
        <a href="toLogout" class="layui-btn">注销</a>
      </p>
    </div>
  </div>

  <div class="content whisper-content leacots-content">
    <div class="cont w1000">
      <div class="whisper-list">
        <div class="item-box">
          <div class="review-version">
              <div class="form-box" >
                <img class="banner-img" src="../res/img/liuyan.jpg" style="box-shadow: 0 3px 18px rgba(100,93,1,0.8);">
                <div class="form" >
                  <form class="layui-form" action="publish.action" enctype="multipart/form-data" id="EssayForm" method="post">
                    <div class="layui-form-item layui-form-text">
                      <div class="layui-form-item">
                        <div class="layui-input-block">
                          <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                      </div>
                      <div class="layui-input-block">
                        <textarea id="content" placeholder="在这里发表你的博客!" class="layui-textarea" style="height: 200px"></textarea>
                        <textarea id="code" placeholder="在这里添加代码" class="layui-textarea" style="height: 150px;margin-top: 15px"></textarea>
                        <!--<textarea name="textarea" placeholder="在这里发表你的博客!" class="layui-textarea" ></textarea>-->
                        <input type="hidden" name="userName" th:value="${session.loginUser.name}">
                        <input type="hidden" name="content" id="input1">
                        <input type="hidden" name="code" id="input2">
                        <input type="hidden" name="imgUrl" id="imgUrl">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block" style="text-align: right;">
                        <div class="layui-form-item">
                          <label class="layui-form-label">博客标签</label>
                          <div class="layui-input-inline">
                            <select name="tag">
                              <option value="">请选择类别</option>
                              <option value="技术" >技术类</option>
                              <option value="杂文">杂文类</option>
                              <option value="新闻">新闻类</option>
                            </select>
                          </div>
                          <div class="layui-input-inline" th:if="${session.albumList!=null}">
                            <select name="albumId" >
                              <option value="empty">请选择相册图片</option>
                              <div th:each="tag:${session.albumList}">
                                <option th:value="${tag.id}"  th:text="${tag.imgMessage}"></option>
                              </div>
                            </select>
                          </div>
                          <div class="layui-input-inline">
                            <select name="authority">
                              <option value="1">谁可见?</option>
                              <option value="1">所有人</option>
                              <option value="0">仅自己</option>
                              <!--<option value="2">vip</option>-->
                            </select>
                          </div>
                        </div>
                        <p style="text-align: left;color: #b2b2b2">** 如果选择了相册图片,请不要再上传图片了 o(╥﹏╥)o</p>
                        <button  lay-submit="" lay-filter="formDemo" class="layui-btn definite" onclick="aa()" id="btn">发表</button>
                        <!--<input type="button" lay-submit="" lay-filter="sb" class="layui-btn definite" value="确定" id="sb">-->
                        <button type="button" class="layui-btn" id="uploadImg">
                          <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="laytplCont">
    <div class="cont">
      <div class="img">
        {{#  if(d.avatar){ }}
        <img src="{{d.avatar}}" alt="">
        {{#  } else { }}
        <img src="../res/img/header.png" alt="">
        {{# } }}
      </div>
      <div class="text">
        <p class="tit"><span class="name">{{d.name}}</span><span class="data">2018/06/06</span></p>
        <p class="ct">{{d.cont}}</p>
      </div>
    </div>
  </script>
  <div class="footer-wrap">
    <div class="footer w1000">
      <div class="qrcode">
        <img src="../res/img/erweima.jpg">
      </div>
      <div class="practice-mode">
        <img src="../res/img/down_img.jpg">
        <div class="text">
          <h4 class="title">我的联系方式</h4>
          <p>微信<span class="WeChat">15521306790</span></p>
          <p>手机<span class="iphone">15521306790</span></p>
          <p>邮箱<span class="email">1115051923@qq.com</span></p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <script>
    layui.use(['upload','form'], function() {
      var upload = layui.upload;
      var form = layui.form;
      $=layui.jquery;
      /*$("#input").val(content);*/
      //执行实例
      var uploadInst = upload.render({
        elem: '#uploadImg' //绑定元素
        , url: '/uploadImg.action' //上传接口
        , accept: 'file'
        , done: function (res) {
          //接收图片url后赋给表单
          $("#imgUrl").val(res.imgUrl);
          //上传完毕回调
          layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg(res.msg, {
              time: 1000, //1s后自动关闭
              icon: 1
            });
          });
        }
        , error: function () {
          layer.msg("图片过大");
        }
      });
      form.on('submit(formDemo)', function(data){
        $.ajax({
          url:'/publish.action',
          method:'post',
          data:data.field,
          dataType:'JSON',
          success:function(res){
            var layer = layui.layer;
            layer.msg(res.msg, {
              time: 2000, //1s后自动关闭
              icon: 1
            });
          },
          error:function (data) {

          }
        });
      })
    });
    layui.config({
      base: '../res/js/util/'
    }).use(['element','laypage','form','menu'],function(){
      element = layui.element,laypage = layui.laypage,menu = layui.menu;
      laypage.render({
        elem: 'demo'
        ,count: 70 //数据总数，从服务端得到
      });
      $=layui.jquery;
      var form = layui.form;
      form.on('submit(formDemo)', function(data){
        $.ajax({
          url:'/addComment.action',
          method:'post',
          data:data.field,
          dataType:'JSON',
          success:function(res){
            var layer = layui.layer;
            layer.msg(res.msg, {
              time: 1000, //1s后自动关闭
              icon: 1
            });
          },
          error:function (data) {

          }
        });
        return false;
      });

      form.on('submit(formDelete)', function(data){
        $.ajax({
          url:'/deleteComment.action',
          method:'post',
          data:data.field,
          dataType:'JSON',
          success:function(res){
            var layer = layui.layer;
            layer.msg(res.msg, {
              time: 2000, //1s后自动关闭
              icon: 1
            });
          },
          error:function (data) {

          }
        });
        return false;
      });
      menu.init();
      //menu.off();
      menu.submit()
    });

    layui.use('code', function(){ //加载code模块
      layui.code({
        title: 'Java',
      }); //引用code方法
    });
  </script>
  <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
  <script>
    function aa() {
      var content = document.getElementById("content").value;
      $("#input1").val(content);
      var code = document.getElementById("code").value;
      $("#input2").val(code);
    }
  </script>
  <script>
    function search() {
      document.getElementById("searchForm").submit();//js原生方式表单提交
    }
  </script>
</body>
</html>